<template>
	<view class="acvbmict">
			<!-- <input class="ser-input" @click="search" v-model="value" type="text" value="niha" placeholder="请输入搜索关键词" disabled /> -->
			<view class="user-section">
				<image class="bg" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/%E5%BC%A5%E6%95%A3%E6%A8%A1%E7%B3%8A.png"></image>
			<van-search
			  :value="text"
			  placeholder="请输入搜索关键词"
			  @click-input="search"
			/>
			</view>
		 <u-scroll-list class="cate-section">
	   <view class="ctent" @click="navTo('/pages/category/management?type=MANGER')">
		   <image class="actopr" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cotex1.png" mode=""></image>
		 <text>管家监理</text>
	   </view>
	   <view class="ctent" @click="navTo('/pages/category/management?type=DESIGN')">
		   <image class="actopr" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cotex2.png" mode=""></image>
		<text>找设计</text>
	   </view>
	   <view class="ctent" @click="navTo('/pages/category/management?type=WOOD_WORKER&isid=wood')">
		   <image class="actopr" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cotex3.png" mode=""></image>
		<text>找工人</text>
	   </view>
	   <view class="ctent" @click="navTo('/package/commodity/familylife?type=c1')">
		   <image class="actopr" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cotex4.png" mode=""></image>
		<text>基础辅材</text>
	   </view> 
	   <view class="ctent" @click="navTo('/package/commodity/familylife?type=c2')">
	   		   <image class="actopr" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cotex5.png" mode=""></image>
	   		<text>品牌主材</text>
	   </view>
	   <view class="ctent" @click="navTo('/pages/category/management?type=INSTALL_CHANGE')">
	   		   <image class="actopr" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cotex6.png" mode=""></image> 
	   		<text>安装与维修</text>
	   </view>
	   <view class="ctent" @click="navTo('/pages/category/management?type=HOUSE_KEEP_CLEAR')">
	   		   <image class="actopr" src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cotex7.png" mode=""></image> 
	   		<text>家政保洁</text>
	   </view> 
	   </u-scroll-list>
	   
	     <view class="empty" v-if="list.length==0">
	     	<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cltynull.png" mode="aspectFit"></image>
	     	<view class="empty-tips">
                 暂无相关人员哦~~
	     	</view>
	     </view>
	   <view v-for="(item,index) in list" :key="item" class="acvtube">
	   	 <view>
	   	 	<image class="acvubin" @click="actione(item)" :src="item.avatarUrl" alt=""></image>
			<span class="caty-test">{{item.nick}}&nbsp;|&nbsp;{{fundeaster(item.type)}}</span>
			<van-button size="small" @click="xhitbus(item)">购买服务</van-button>
			<span class="caty-tianm" v-if="item.experienceLengthDesc != ''">{{item.experienceLengthDesc}}以上经验</span>  
	   	 </view>
		 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[0]" mode=""></image>
		 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[1]" mode=""></image>
		 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[2]" mode=""></image>
	   </view>
	   <u-loadmore :status="status" />
	</view>
</template> 

<script>
	import use from '../../http/user.js'
	import employeesConst from '@/employees/employees.js'
	const hireTypecon = {}
	employeesConst.hireTypecon.forEach((item) => {
	  hireTypecon[item.type] = item.value;
	});
	
	export default {
		data() {
			return {
				status: 'loadmore',
				page: 0,
				show:false,
				list:[],
				q:{
					index:1,
					size:10 
				},
				 actions: [
				
				     {
				        name:'选项',
				      },
				      {
				        name: '选项',
				      }
				    ],
			}
		},
		onLoad(){
			this.loadData(); 
		},
		onReachBottom() {
					if(this.page >= 3) return ;
					this.status = 'loading';
					this.page = ++ this.page;
					setTimeout(() => {
						this.q.size += 20;
						if(this.page >= 3) this.status = 'nomore';
						else this.status = 'loadmore';
					}, 1000)
					 this.loadData(); 
				},
		methods: {
			 async loadData(){
			  const res = await use.authenticati(this.q)
			  this.list = res.data.data
			},
         fundeaster(code){
			 return hireTypecon[code]
		 },
		 // 购买服务
		  xhitbus(item){
			  console.log(item)
			 uni.navigateTo({
			 	url: `/pages/components/authentication?id=`+item.userId, 
			 })
		 },
		 // 跳转用户详细资料
		async actione(item){
			 uni.navigateTo({
			 	url: `/pages/components/authentication?id=`+item.userId, 
			 })
		 },
		 // 基础辅材
		 navTo(url){
		 	uni.navigateTo({  
		 		url
		 	})  
		 },
		 // 跳转搜索页面
		 search(){
			 uni.navigateTo({
			 	url: `/pages/category/search`,
			 })
		 },
		}
	}
</script>

<style lang='scss'>
	.u-scroll-list__indicator{
		display: none !important;
	}
	
     .acvbmict{
		 background-color: #f2f2f2;
	 }
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		}
	.ctent{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		
	}
.actopr{
	width: 70px;
	height: 70px;
	display: inline-block;
	margin-top: 20rpx;
	margin-left: 10rpx;
}
.acvubin{
	width: 75upx;
	height: 75upx;
	border-radius: 50%;
}
.acvtube{
	position: relative;
	margin-left: 20upx;   
	margin-right: 20upx;
	padding-left: 15rpx;
	padding-top: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 30rpx;
    background-color: #fff;
}
.caty-test{
	display: inline-block; 
	margin-left: 26rpx;
	font-size: 28rpx;  
	width: 50%; 
	transform: translateY(-100%);
	margin-bottom: 10upx;
}
.caty-tianm{ 
	display: inline-block;
    color: #939393;
	font-size: 24rpx;
	/* float: left; */
	width: 35%;
	transform: translateX(-130%); 
} 
.caty-eimage{
	display: inline-block; 
	width: 30%; 
	height: 220rpx;
	border-radius: 20px;
	margin-right: 3%;
}

.van-button--default{
	background-color: #ff7144 !important;
	border: 1px solid #ff7144 !important; 
	color: #fff !important;
	margin-right: 15rpx !important;
	margin-top: 10rpx !important;
	border-radius: 20px !important;
	position: absolute !important;
	top: 20rpx !important;
	right: 15rpx !important; 
}
.van-popup--safe{
	padding-bottom: 0 !important;
}
.van-search__content{
	flex:1;
	line-height: 56upx;
	width: 90%;
	margin-left: 30rpx;
	margin-top: 20rpx;
	text-align: center;
	font-size: 28upx;
	color:$font-color-base;
	border-radius: 20px !important;
	background: rgba(255,255,255,.6);
	border: 1px solid #ff7144;
	}
	.u-scroll-list{
		background-color: #fff;
	}
	
	.user-section{
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	
	/* // 空白页 */
		.empty{
				
			overflow: none;
		
			width: 100%;
			height: 100vh;
			padding-bottom:100upx;
			display:flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
			background: #fff;
			image{
				width: 240upx;
				height: 160upx;
				margin-bottom:30upx;
			}
			.empty-tips{
				display:flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;
				.navigator{
					color: $uni-color-primary;
					margin-left: 16upx;
				}
				}
				}
				
</style>
